<template>
  <div>
    <div v-if="multipleFlag">
      <a-input v-model="departManagerCodess" placeholder="请输入" type="hidden"/>
      <a-input-search
        :placeholder="placeholderContent"
        v-model="departManagerCodeNameString"
        onfocus="this.blur()"
        @search="departManagerCodeSearch">
        <a-button slot="enterButton" icon="search">选择</a-button>
      </a-input-search>
      <depart-window
        ref="departManagerCodeRef"
        @ok="departManagerCodeOk"
        :benbu-flag="benbuFlag"
        :multiple-flag="multipleFlag"
        :powerFlag="powerFlag"
        :orgFlag="orgFlag"></depart-window>
    </div>
    <div v-if="!multipleFlag">
      <a-input v-model="departCodess" placeholder="请输入" type="hidden"/>
      <a-input-search
        :placeholder="placeholderContent"
        v-model="departCodeNameString"
        onfocus="this.blur()"
        @search="departCodeSearch">
        <a-button slot="enterButton" :disabled="disabled" icon="search">选择</a-button>
      </a-input-search>
      <depart-window
        ref="departCodeRefS"
        @ok="departCodeOk"
        :benbu-flag="benbuFlag"
        :multiple-flag="multipleFlag"
        :powerFlag="powerFlag"
        :orgFlag="orgFlag"></depart-window>
    </div>
  </div>
</template>

<script>
  import DepartWindow from '@/components/WxDepartChoose/DepartWindow'

  export default {
    name: 'DepartWindowShow',
    components: {
      DepartWindow
    },
    props: {
      multipleFlag: {
        type: Boolean,
        default: false
      },
      placeholderContent: {
        type: String,
        default: '点击右侧按钮选择组织'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      benbuFlag: {
        type: Boolean,
        default: null
      },
      // 模式 0公司+部门 1公司 2项目
      orgFlag: {
        type: Number,
        default: 0
      },
      powerFlag: {
        type: Boolean,
        default: true
      },
      checkedDepartKeys: {
        type: String,
        default: '',
        required: false
      }
    },
    mounted() {
      this.departList = []
      this.checkedKeys = []
      this.departTree = []
      this.departManagerCodess = ''
      this.departCodess = ''
      this.departManagerCodeKeys = []
      this.departManagerCodeNames = [] // 保存管理部门的名称 =>title
      this.departManagerCodeNameString = '' // 保存管理部门的名称 =>title
    },
    created() {
      this.$nextTick(() => {
        if (this.checkedDepartKeys) {
          this.departManagerCodeNameString = this.$store.getters.getDepartmentName(this.checkedDepartKeys)
          this.departCodeNameString = this.departManagerCodeNameString
        }
      })
    },
    data() {
      return {
        departManagerCodess: '',
        departCodess: '',
        departManagerCodeKeys: [],
        departManagerCodeNames: [], // 保存管理部门的名称 =>title
        departManagerCodeNameString: '', // 保存管理部门的名称 =>title
        departCodeNameString: '', // 保存归属部门的名称 =>title
        departCodeKeys: ''
      }
    },
    methods: {
      // 搜索用户对应的归属部门API
      departManagerCodeSearch() {
        this.$refs.departManagerCodeRef.add(this.checkedDepartKeys.split(','))
      },
      // 搜索用户对应的归属部门API
      departCodeSearch() {
        this.$refs.departCodeRefS.add([this.checkedDepartKeys])
      },
      // 获取用户对应部门弹出框提交给返回的数据
      departManagerCodeOk(formData) {
        this.departManagerCodeNames = []
        this.departManagerCodeKeys = []
        this.departManagerCodeNameString = ''
        this.departManagerCodess = ''
        for (let i = 0; i < formData.departIdList.length; i++) {
          this.departManagerCodeKeys.push(formData.departIdList[i].key)
          this.departManagerCodeNames.push(formData.departIdList[i].title)
        }
        this.departManagerCodeNameString = this.departManagerCodeNames.join(',')
        this.departManagerCodess = this.departManagerCodeKeys.join(',')
        this.$emit('ok', this.departManagerCodess, formData.benbuFlag)
        console.log(this.departManagerCodess)
      },
      // 获取用户对应部门弹出框提交给返回的数据
      departCodeOk(formData) {
        this.departCodeKeys = ''
        this.departCodeNameString = ''
        this.departCodess = ''
        if(formData.departIdList.length>0) {
              this.departCodeKeys = formData.departIdList[0].key
              this.departCodeNameString = formData.departIdList[0].title
          }
        this.departCodess = this.departCodeKeys
        this.$emit('ok', this.departCodess, formData.benbuFlag)
        console.log(this.departCodess)
      }
    },
    watch: {
      checkedDepartKeys(val) {
        const tmpInfo = []
        if (this.multipleFlag) {
          val.split(',').map(x => {
            tmpInfo.push(this.$store.getters.getDepartmentName(x))
          })
          this.departManagerCodeNameString = tmpInfo.join(',')
        } else {
          val.split(',').map(x => {
            tmpInfo.push(this.$store.getters.getDepartmentName(x))
          })
          this.departCodeNameString = tmpInfo.join(',')
        }
      }
    }
  }
</script>
